<!-- 专家 -->
<template>
  <div class="expertPage basePageBox" v-loading="loading">
    <div class="expertBanner">
      <Banner></Banner>
    </div>
    <!-- 专家风采 -->
    <div class="expertTitle">
      <CustomTitle title="专家列表"></CustomTitle>
      <div class="expertList">
        <ExpertCardCard
          v-for="(item, index) in expertList"
          :key="'hot' + index"
          :cardData="item"
        ></ExpertCardCard>
      </div>
    </div>

    <div class="expertList"></div>
    <div class="pagination" v-if="expertList.length">
        <CustomPagination
          layout="prev, pager, next"
          :total-items="totalCount"
          :page-size="searchForm.pageSize"
          :current-page="searchForm.pageNum"
          @pagination-current-change="handleCurrentChange"
        ></CustomPagination>
      </div>
      <el-empty v-if="!expertList.length" description="暂无数据"></el-empty>
  </div>
</template>

<script>
import CustomTitle from "@/components/CustomTitle.vue";
import Banner from "./components/Banner.vue";
import ExpertCardCard from "@/components/ExpertCard.vue";
import CustomPagination from '@/components/CustomPagination.vue';
import { getExpertByCondition }  from '@/api/expert'

export default {
  name: "Expert",
  components: { CustomTitle, Banner, ExpertCardCard,CustomPagination },
  data() {
    return {
      expertList:[],
      totalCount: 200,
      searchForm: {
        pageNum: 1,
        pageSize: 16,
      },
      loading: true
    };
  },
  mounted() {
    this.getPageList();
    this.$bus.$on('emitNavPageSearch', () => {
      this.searchForm.pageNum = 1
      this.getPageList()
    })
  },
  beforeDestroy() {
    this.$bus.$off('emitNavPageSearch')
  },
  methods: {
    // 获取专家列表
      async getPageList() {
      try {
        this.loading = true;
        let params = {
         ...this.searchForm
        };
        if (this.$store.state.app.searchKey) { //暂时
          params.name = this.$store.state.app.searchKey
        }
        const resData = await getExpertByCondition(params);
        this.expertList = resData.list;
        this.totalCount = resData.total;
        this.loading = false;
      } catch (error) {
        this.loading = false;
        console.error(error);
      }
    },

    // 分页处理
    handleCurrentChange(val) {
      console.log(this.searchForm.pageNum);
      this.searchForm.pageNum = val
      this.getPageList()
    },
  },
};
</script>

<style scoped lang="scss">
.expertPage {
  padding-bottom: 50px;

  .expertBanner {
    display: flex;
    justify-content: space-between;
    padding-top: 30px;
  }
  .expertTitle {
    padding-top: 30px;
  }
  .expertList {
     display: grid;
    gap: 24px;
    grid-template-columns: repeat(6, 1fr);
    margin-top: 17px;
    // padding-top: 30px;
  }

    .pagination {
    background-color: #fff; /* 举例背景色 */
    padding: 14px; /* 举例内边距 */
    text-align: center;
    margin-bottom: 64px;
  }
}
</style>
